<template>
  <div class="app-container">
    <h2>产品服务列表</h2>
    <search-box
      :fields="searchFeilds"
      @search="handleSearch"
      @add="handleAdd"
    />

    <SearchResult
      uid="productService"
      ref="searchResult"
      :params="params"
      :ignoreCommand="ignoreCommand"
    >
      <el-table-column label="中文标题" align="left">
        <template slot-scope="{row}">
          <span>{{ row.chineseTitle }}</span>
        </template>
      </el-table-column>

      <el-table-column label="英文标题" align="center">
        <template slot-scope="{row}">
          <span>{{ row.englishTitle }}</span>
        </template>
      </el-table-column>

      <el-table-column label="产品服务标签" align="center">
        <template slot-scope="{row}" v-if="row.productServiceTag">
          <span v-for="item of row.productServiceTag.split(',')" :key="item">
            <el-tag>{{ item }}</el-tag>
          </span>
        </template>
      </el-table-column>

      <el-table-column label="产品服务内容" align="center">
        <template slot-scope="{row}">
          <span>{{ row.productServiceContent }}</span>
        </template>
      </el-table-column>

      <el-table-column label="产品效益" align="center">
        <template slot-scope="{row}">
          <span>{{ row.productBenefit }}</span>
        </template>
      </el-table-column>

      <el-table-column label="产品描述" align="center">
        <template slot-scope="{row}">
          <span>{{ row.productServiceDescription }}</span>
        </template>
      </el-table-column>
    </SearchResult>

    <!-- <EditProduct
      :visible.sync="dialogVisible"
      title="产品服务"
      :data.sync="dialogForm"
      :ignoreCommand="ignoreCommand"
    /> -->
  </div>
</template>

<script>
import { EventBus } from '@/utils/event-bus';
import SearchBox from '@/components/SearchBox';
import SearchResult from '@/components/SearchResult';
import EditProduct from '@/components/DialogComponents/edit-product';
import { getProductLevelList } from '@/utils/config';

export default {
  name: 'product-service',
  components: { SearchBox, SearchResult, EditProduct },
  data() {
    return {
      searchFeilds: [
        { name: 'ChineseTitle', label: '中文标题', type: 'text' },
        { name: 'EnglishTitle', label: '英文标题', type: 'text' },
        { name: 'ProductServiceContent', label: '产品服务内容', type: 'text' },
        { name: 'ProductServiceTag', label: '产品服务标签', type: 'text' },
        { name: 'ProductBenefit', label: '产品效益', type: 'text' }
      ],

      params: {},

      ignoreCommand: ['enable', 'disable', 'detail']
    }
  },
  created() {
    EventBus.$emit('custom-breadcrumb', getProductLevelList(this.$options.name));
  },
  methods: {
    // 搜索
    handleSearch(data) {
      if (data === void 0) data = {};

      this.params = data;
      this.$refs['searchResult'].getData(data);
    },

    // 添加
    handleAdd() {
      this.$refs['searchResult'].handleAdd();
    }
  }
}
</script>
